<template>
	<!-- #ifdef VUE3 -->
	<view class="table-paging" :style="`--primaryColor: ${primaryColor}`">
	<!-- #endif -->
	<!-- #ifdef VUE2 -->
	<view class="table-paging" :style="{'--primaryColor': primaryColor}">
	<!-- #endif -->
    <view
      :class="{
        'table-paging-item': true,
        turner: true,
        disabled: pageIndex <= 1,
      }"
      @click="prePage"
    >
      <text>上一页</text>
    </view>
    <view class="table-paging-item page">
      <text class="table-paging-current">{{ pageIndex || "1" }}</text>
      <text class="table-paging-gap">/</text>
      <text>{{ pageTotal || "0" }}</text>

      <!-- 每页条数选择器 -->
      <view v-if="showPageSizeSelector" class="table-paging-item page-size">
        <text class="page-size-label">每页</text>
        <input
          class="page-size-input"
          type="number"
          :value="currentPageSize"
          @input="onPageSizeInput"
          @blur="onPageSizeBlur"
          @confirm="onPageSizeConfirm"
        />
        <text class="page-size-label">条</text>
      </view>

    </view>
    <view
      :class="{
        'table-paging-item': true,
        turner: true,
        disabled: pageIndex >= pageTotal,
      }"
      @click="nextPage"
    >

			<text>下一页</text>
    </view>
  </view>
</template>
<script>
export default {
	emits:['change', 'pageSizeChange'],
	props: {
		pageIndex: {
			type: Number,
			default: 1
		},
		pageTotal: {
			type: Number,
			default: 0
		},
		pageSize: {
			type: Number,
			default: 10
		},
		showPageSizeSelector: {
			type: Boolean,
			default: false
		},
		pageSizeOptions: {
			type: Array,
			default: () => [10, 20, 50, 100]
		},
		primaryColor: {
			type: String,
			default: '#f0ad4e'
		}
	},
	data() {
		return {
			currentPageSize: this.pageSize
		}
	},
	watch: {
		pageSize(newVal) {
			this.currentPageSize = newVal;
		}
	},
	methods: {
		// 上一页
		prePage() {
		  if (this.pageIndex <= 1) {
		    return;
		  }
		  this.$emit("change", this.pageIndex - 1);
		},
		// 下一页
		nextPage() {
		  if (this.pageIndex >= this.pageTotal) {
		    return;
		  }
		  this.$emit("change", this.pageIndex + 1);
		},
		// 处理 pageSize 输入
		onPageSizeInput(e) {
			this.currentPageSize = e.detail.value;
		},
		// 处理 pageSize 失焦
		onPageSizeBlur() {
			this.validateAndEmitPageSize();
		},
		// 处理 pageSize 确认
		onPageSizeConfirm() {
			this.validateAndEmitPageSize();
		},
		// 验证并发送 pageSize 变化事件
		validateAndEmitPageSize() {
			let size = parseInt(this.currentPageSize);
			if (isNaN(size) || size < 1) {
				size = this.pageSize; // 恢复原值
				this.currentPageSize = size;
			} else if (size > 1000) {
				size = 1000; // 限制最大值
				this.currentPageSize = size;
			}

			if (size !== this.pageSize) {
				this.$emit("pageSizeChange", size);
			}
		}
	}
}

</script>
<style lang="scss" scoped>
$primary-color: var(--primaryColor);

.table-paging {
  height: 40px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  font-size: 14px;
  color: $primary-color;
  line-height: 1;
}
.table-paging-item {
  display: flex;
  align-items: center;
  &.page {
    color: #999999ff;
  }
  &.turner {
    padding: 0 5px;
    transition: all 0.2s linear;

    &:hover {
      opacity: 0.8;
    }
  }
  &.disabled {
    cursor: not-allowed;
    color: #999999;
  }
}
.table-paging-current {
  color: $primary-color;
  font-size: 14px;
  font-weight: 500;
}
.table-paging-gap {
  margin: 0 5px;
}

.page-size {
  margin-left: 20px;

  .page-size-label {
    color: #999999;
    font-size: 14px;
  }

  .page-size-input {
    width: 50px;
    height: 28px;
    margin: 0 5px;
    padding: 0 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    color: #606266;
    background-color: #fff;

    &:focus {
      border-color: $primary-color;
      outline: none;
    }
  }
}
</style>
